<template>
	<view class="fixAuto bb ">
		<view class="w100">
			有效期至
		</view>
		<view class="father">
			<view class="flex">
				<view :class="deadline?'black':'gray'">
					{{deadline?deadline:'请选择'}}
					<input type="text" :name="name" v-model="deadline" style="display: none;">
				</view>
				<view class="sIcon-arrowRight fz14 grey pl10"></view>
			</view>
			<view class="abs op0">
				<picker mode="date" @change="confirm">
					<view>有效期至</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pickDates",
		props: {
			name: {
				type: String ,
				default: ""
			},
			value:{
				default : ""
			}
		},
		
		data() {
			return {
				deadline : ""
			};
		},
		
		created() {
			this.deadline = this.value ;
		},
		
		watch:{
			value:function(e){
				this.deadline = this.value ;
			},
		},
		
		methods:{
			confirm:function(e){
				this.deadline = e.detail.value ;
				this.$emit("confirm" , { value : this.deadline  });
			},
		}
	}
</script>

<style lang="scss" scoped>

.dotGroup{
	text-align: center;
	.dot{
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: $main;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		margin: 0 4px;
		animation:scale infinite 0.7s ;
		&+.dot{
			background-color: lighten($color: $main, $amount: 10%);
			animation-delay: 0.2s ;
			&+.dot{
				background-color: lighten($color: $main, $amount: 15%);
				animation-delay: 0.3s ;
				&+.dot{
					background-color: lighten($color: $main, $amount: 20%);
					animation-delay: 0.4s ;
				}
			}
		}
	}
}

@keyframes scale{
	0%,100%{
		transform: scale(1);
		opacity: 1;
	}	
	50%{
		opacity: 0.5;
		transform: scale(0.2);
	}
}

.empty{
	color: #b5b5b5;
}
[class*="sicon-"]{
	color: #d0d0d0;
}
</style>
